<template>
	<view class='page-container'>
		<view class="score-list-container">
			<!-- <block v-if="scoreData.list.length>0"> -->
			<!-- 	<view class="score-list-item" v-for="(item,index) in scoreData.list" :key='item.id'>
					<view class="score-list-item-base-info">
						<text class="score-list-item-name">{{item.name}}</text>
						<text class="score-list-item-singer">{{item.singer}}</text>
					</view>
					<view class="score-list-item-option">
						<image src="/static/image/score/collect.png" class="score-list-item-option-icon"></image>
						<image src="/static/image/score/play.png" class="score-list-item-option-icon"></image>
					</view>
				</view> -->
			<!-- </block> -->
			<!-- <block v-else> -->
				<view class="search-result-empty" v-if='showEmpty'>
					暂无结果
				</view>
			<!-- </block> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onNavigationBarButtonTap, onNavigationBarSearchInputConfirmed, onNavigationBarSearchInputChanged } from "@dcloudio/uni-app"

	// const scoreData = reactive({
	// 	list: [
	// 		{
	// 			id: 1,
	// 			name: "四季予你四季四季予你四季四季予你四季四季予你四季",
	// 			singer: "程响程响程",
	// 			isCollection: false,
	// 		},
	// 		{
	// 			id: 2,
	// 			name: "四季予你四季四季予你四季四季予你四季四季予你四季",
	// 			singer: "程响程响程",
	// 			isCollection: false,
	// 		}
	// 	]
	// })
	const searchInfo = ref('');
	const showEmpty = ref(false);
	/**
	 * 调用搜索接口
	 */
	const search = () => {
		showEmpty.value = false
		if (searchInfo.value.length <= 0) {
			uni.showToast({
				icon: 'none',
				title: '搜索内容不能为空',
			})
			return
		};
	}

	/**
	 * 顶部搜索栏内容发生改变
	 */
	onNavigationBarSearchInputChanged((e) => {
		searchInfo.value = e.text
		showEmpty.value = false
	})
	/**
	 * 顶部搜索栏内容变更
	 */
	onNavigationBarSearchInputConfirmed(() => {
		search()
	})
	/**
	 * 键盘底部的搜索点击
	 */
	onNavigationBarButtonTap(() => {
		search()
	})
</script>

<style lang="scss" scoped>
	.uni-input-form {
		color: #fff !important;
	}

	.page-container {
		.search-container {
			position: sticky;
			top: 0;
			width: 750rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-input {
				// margin: 0 40rpx;
				width: 670rpx;
				height: 56rpx;
				background: #353333;
				border-radius: 28rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0 28rpx;

				>icon {
					margin-right: 20rpx;
				}

				>input {
					width: 600rpx;
				}
			}
		}

		.score-list-container {
			padding-top: 8rpx;

			.score-list-item {
				width: 646rpx;
				height: 40rpx;
				padding: 16rpx 48rpx 16rpx 56rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.score-list-item-base-info {
					max-width: 500rpx;
					display: flex;
					align-items: flex-end;

					.score-list-item-name {
						max-width: 350rpx;
						font-size: 28rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.score-list-item-singer {
						flex: 1;
						font-size: 24rpx;
						padding-left: 16rpx;
						color: #8A8A8A;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.score-list-item-option {
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.score-list-item-option-icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.search-result-empty {
			text-align: center;
			padding-top: 450rpx;
			color: #7A7777;
		}
	}
</style>